import Vue from 'vue'
import Component from 'vue-class-component'
import '../settingStyle.css'
import OrderItemClass from '../../order/component/orderItem.js'
import OrderListClass from '../../order/component/orderList.js'

@Component
export default class UserOrdersClass extends Vue {
  active = '1'
  isShowStoreOrder = true
  wrapperHeight = 0
  storeCurrentPage = 0
  formCurrentpage = 0
  storeList =[]
  formList = []
  storeOrderLoading = false
  formOrderLoading = false
  canLoadFrom = true
  canLoadStore = true

  get caculateHeight() {
    return 'height:' + String(this.wrapperHeight) + 'px'
  }

  created() {
    this.wrapperHeight = document.documentElement.clientHeight - 64
  }

  updated() {

  }

  async getStoreOrdersData() {
    this.storeCurrentPage += 1
    if (this.storeCurrentPage === 1) {
      this.storeList = []
    }
    try {
      let params = {}
      params['pageSize'] = 10
      params['pageIndex'] = this.storeCurrentPage
      this.storeOrderLoading = true
      const response = await this.$axios.post('/platform/v1/orders', params)
      if (response.status === 0) {
        if (!response.data.orders || response.data.orders.length < 10) {
          this.canLoadStore = false
        }
        if (this.storeCurrentPage === 1) {
          this.storeList = response.data.orders
        } else {
          this.storeList = this.storeList.concat(response.data.orders)
        }
      }
      this.storeOrderLoading = false
    } catch (e) {
      this.storeOrderLoading = false
      console.log(e)
    }
  }

  async getFormOrdersData() {
    this.formCurrentpage += 1
    if (this.formCurrentpage === 1) {
      this.formList = []
    }
    try {
      let params = {}
      params['pageSize'] = 10
      params['pageIndex'] = this.formCurrentpage
      this.formOrderLoading = true
      const response = await this.$axios.post('/platform/v1/orders', params)
      if (response.status === 0) {
        if (!response.data.demands || response.data.demands.length < 10) {
          this.canLoadFrom = false
        }
        if (this.formCurrentpage === 1) {
          this.formList = response.data.demands
        } else {
          this.formList = this.formList.concat(response.data.demands)
        }
      }
      this.formOrderLoading = false
    } catch (e) {
      this.formOrderLoading = false
      console.log(e)
    }
  }

  loadMoreStoreOrders () {
    if (this.canLoadStore) {
      this.storeCurrentPage = 0
      this.getStoreOrdersData()
    }
  }

  loadMoreFormOrders () {
    if (this.canLoadFrom) {
      this.formCurrentpage = 0
      this.getFormOrdersData()
    }
  }

  changeStatus () {
    this.isShowStoreOrder = !this.isShowStoreOrder
    let s = this.$refs.storeOrderMenu
    let f = this.$refs.wantOrder
    if (this.showSort) {
      s.style = 'color:red'
      f.style = 'color:#000'
    } else {
      s.style = 'color:#000'
    }
  }

  createStoreOrderItems() {
    let arr = this.active === '1' ? this.storeList : this.formList
    if (!arr || arr.length <= 0) {
      return
    }
    const item = arr.map(value => {
      return <OrderItemClass order={value}></OrderItemClass>
    })
    return item
  }

  createFormOrderItems() {
    if (!this.formList || this.formList.length <= 0) {
      return
    }
    const item = this.formList.map(value => {
      return <OrderItemClass order={value}></OrderItemClass>
    })
    return item
  }

  createStoreOrderView () {
    return <div class="pageScroll" ref="wrapper" style={this.caculateHeight + ';padding-top:0px'} v-infinite-scroll={this.loadMoreStoreOrders} infinite-scroll-disabled={this.storeOrderLoading}
             infinite-scroll-distance="0">
              <div>
                {this.createStoreOrderItems()}
              </div>
              <p v-show={this.storeOrderLoading} class="loading">
                <mt-spinner type="fading-circle"></mt-spinner>
                加载中...
              </p>
            </div>
  }

  createWantBuyOrderView () {
    return <OrderListClass url='/platform/v1/orders'></OrderListClass>
  }

  render () {
    return (
      <div>
        <mt-header class='header' fixed title="我的订单">
          <mt-button onClick={() => { this.$router.go(-1) }} icon="" slot="left"><icon name = 'backIcon' scale='2'/></mt-button>
        </mt-header>
        <div style={this.caculateHeight + ';margin-top:64px'}>
        {this.createWantBuyOrderView()}
        </div>
      </div>
    )
  }
}
